<div class="oppia-state-editor-header">
  <div class="oppia-state-name-container">
    <div ng-if="editabilityService.isEditable()">
      <h4 ng-if="!stateNameEditorIsShown" ng-click="openStateNameEditor()" class="oppia-editable">
        <[stateName]>
        <span class="glyphicon glyphicon-pencil" title="Edit State Name"></span>
      </h4>

      <div ng-if="stateNameEditorIsShown">
        <form class="form-horizontal" role="form" ng-submit="saveStateNameAndRefresh($parent.tmpStateName)">
          <input type="text" ng-model="$parent.tmpStateName" focus-on="stateNameEditorOpened">
          <button type="submit" class="btn btn-default">Done</button>
        </form>
      </div>
    </div>

    <div ng-if="!editabilityService.isEditable()">
      <h4><[stateName]></h4>
    </div>
  </div>
</div>

<div class="oppia-state-editor-body">
  <div class="oppia-editor" ng-show="stateName">
    <div style="margin-bottom: -15px;">
      {% include 'editor/state_editor_content.html' %}
    </div>
    <div ng-controller="InteractiveWidgetEditor">
      {% include 'editor/state_editor_interaction.html' %}
      {% include 'editor/state_editor_widget_sticky.html' %}
      <hr>
      {% include 'editor/state_editor_rules.html' %}
    </div>
    <hr>
    {% include 'editor/state_editor_footer.html' %}
  </div>
</div>
